<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>TinyLab</title>
    <link rel="stylesheet" type="text/css" href="static/styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="static/ast.js"></script>
    <script src="static/matrix.js"></script>
    <script src="static/api.js"></script>
    <script src="static/matrix-ui.js"></script>
</head>

<body>

    <div id="helpButton" class="help-button">
        <span class="help-icon">?</span>
    </div>

    <div id="helpDialog" class="help-dialog">
        <button class="close-button" onclick="closeHelpDialog()">&times;</button>
        <h2>帮助</h2>
        <h3>快捷键列表</h3>
        <ul>
            <li>cr - 复制行列</li>
            <li>CR - 删除行列</li>
            <li>wasd - 移动行列</li>
        </ul>
        <h3>语法列表</h3>
        <ul>
            <li>幂次表达式支持特殊操作符：</li>
            <ul>
                <li><code>^T</code>：表示对底数进行转置操作。</li>
                <li><code>^-</code> 或 <code>^-1</code>：表示对底数进行求逆操作。</li>
            </ul>
        </ul>
        <div id="codeEditor">
            <button id="codeButton">&gt;_</button>
            <textarea id="codeInput" placeholder="js code"></textarea>
        </div>
    </div>

    <div class="matrix-container">
        <p id="matrix-name">_</p>
        <p>=</p>
        <span id="left-bracket"></span>
        <table id="matrix-table">
            <!-- Matrix table content will be dynamically generated -->
        </table>
        <span id="right-bracket"></span>
    </div>

</body>

</html>